<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link type="text/css" rel="stylesheet" href="../../template/css/com/com.css"/>
	<link type="text/css" rel="stylesheet" href="../../template/css/list/style.css"/>
	<script src="../../template/js/jquery.js"></script>
	
	<script src="../../template/js/com/template.js"></script>
	<script src="../../resource/my.js"></script>
	<script src="../../script/api.js"></script>
    <link rel="stylesheet" href="../../resource/weui.min.css" />
    <link rel="stylesheet" href="../../resource/jinsuistyle.css" />
    <style>
    	body{
    		
    	}
    	
        	.weui-grid{width:50%;}
        	.weui-grid-main{text-align: center;}
        	.weui-grid__icon{width:70px;height:70px;}
        	.weui-grid-main1{
	        	height: 100px;
	        	line-height:100px;
	        	text-align: center;
	        	font-size:16px;
	        	font-weight:bold;
	        	color:#f7f6f6;
	        	background: #FFFFFF url('../../resource/images/main_bg.png') no-repeat 36px 0px ;
        	}
        	.weui-grid-label{
        	height: 100px;
        	line-height:100px;
        	font-size:16px;
        	font-weight:bold;
        	color:#FFFFA9;
        	text-align: center;
        	text-shadow: #171616 0 1px 0;
        	background: #FFFFFF url('../../resource/images/menu_bg.png') no-repeat 50% 0px ;}
        	.weui-grid-label{width:100px;margin: 0 auto;}
        	.isnew{background: #FFFFFF url('../../template/images/xp4.png') no-repeat 100% 0px ;}
        	.weui-tabbar{border-top-width:0px;}
        	.weui-tabbar{background:none;position: relative !important;}
			.com-content-area{padding:0px;}
			.firstSelectTable {
				border: 1px solid;
				width: 100%;
				height: 40px;
			}
			.firstSelectTable th{
				width: 33%;
			}
			 .content li {
            padding-bottom: 10px;
            margin: 10px;
            border-bottom: 1px solid #D8D8D8;
            
        }
        
        .item, .text {
            display: -webkit-box;
        }
        
        .img {
            width: 80px;
            height: 80px;
        }
        
        img {
            width: 100%;
            display: block;
        }
        
        .text {
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            margin: 0 5px;

        }
        
        .text-price {
            padding: 2px 0;
        }

        .new-price {
            font-size: 20px;
            color: #ff7c70;
            font-family: Impact, Arail, sans-serif;
            font-weight: bold;
        }
        
        .text-price del, .icon-heart {
            margin-left: 15px;
        }
        
        .text-price del, .icon-people + span, .icon-heart + span {
            color: #8c8c8c;
            font-size: 10px;
        }
        
        .icon {
            background-size: 12px;
            background-position: center center;
            background-repeat: no-repeat no-repeat;
            display: inline-block;
            height: 12px;
            width: 12px;
        }
        
        .icon-people {
            background-image: url("../image/dock_icon_my_tuniu@2x.png");
        }

        .icon-heart {
            background-image: url("../image/heart@2x.png");
        }
        
	    .content1 {
	        -webkit-box-flex: 1;
	    }
    	.infoAndMap {
    		width:100%;
    		height:100%;
    		
    	}
		.mainInfo {
			font-weight:500;
			font-size:large;
			font-style:normal;
			padding-left:10px;
			padding-right:10px;
			width: 50%; 
			border-right: 2px solid #005DA9;
		}
		.iam {
			width: 100%;
			height: 200px;
			border-bottom: 2px solid #005DA9;
		}
		.buildings {
			
			width: 100%;
			height: auto;
			border-bottom: 2px solid #005DA9;
		}
		.yd {
			
			text-align: center;
		}
		.ed {
			width: 50%;
			text-align: center;
		}
		.ydInfo {
			width: 30%;
			height: 70%;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			margin-left: auto;
			margin-right: auto;
			border: 1px solid #005DA9;
			
		}
		.ydInfo td{
			border: 1px solid #005DA9;
			width:20px;
			height: 15px;
		}
		.closeMap{
			background-color: #005DA9;
			color: #F9F6F6;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: large;
			font-weight: bold;
		}
		.dmap{
			width: 100%;
			height: 78%; 
			clear: both;
			position: absolute;
			bottom: 0px;
		}
    </style>
</head>
<body>
	<div id="jsheader">
          <nav id="jsnav">
              <a id="jsleft" tapmode="" onclick="api.closeWin();">
                  <span>返回</span>
              </a>
              <div id="jsmiddle">
                  <strong id="jstitle" style="padding-right: 30px;"></strong>
              </div>
              <a id="jsright">
                <span></span>
              </a>
          </nav>
    </div>
	<div class="com-content">
    <div class="com-header-area" id="js-com-header-area">
       	<img src="" id="image" style="width:100%;height: 175px;"/>
    </div>

	<div class="iam">
		<table class="infoAndMap" style="">
			<tr style="">
				<td class="mainInfo" id="mainInfo"></td>	
				<td style="width: 50%;" id="">
					<table style="width: 100%;">
						<tr>
							<td style="width: 50px;">电话：</td>
							<td id="phone"></td>
						</tr>
						<tr>
							<td>地址：</td>
							<td id="dzqc"></td>
						</tr>
						<tr>
							<td colspan="4" style="text-align: center;color: #005DA9;font-weight: bold;" onclick="openMap()">查看地图</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div class="buildings" >
		<table style="width: 100%;height: 100%;">
			<tr id="lcxx" style="width: 100%;height: 100%;">
				
			</tr>
		</table>
		
	</div>
	
	
	
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../resource/jquery-1.js"></script>

<script type="text/javascript">
	
	
	window.apiready = function(){
		var id = api.pageParam.id;
		api.ajax({
	        url:'http://192.168.76.30/jdyd/detail.do?id='+id,
	        method: 'post',
	        cache: 'false',
            timeout: 30,
            dataType: 'json'
        },function(ret,err){
        	var data = eval("("+ret.list+")");
        	//var json=JSON.stringify(data);
        	//alert(json);
        	var picUrl = data.picUrl;
        	var image = document.getElementById('image');
        	$api.attr(image, 'src', picUrl);
        	$("#phone").text(data.phone);
        	$("#dzqc").text(data.dzqc);
        	var mainInfo = document.getElementById('mainInfo');
        	var jstitle = document.getElementById('jstitle');
        	
        	
        	$api.text(jstitle, data.name);
        	$api.text(mainInfo, data.descr);
        	var html="";
        	alert(data.list.length);
       
    		for(var i=0;i<data.list.length;i++){
    			html +='<br/><td>'+
    		'<table>'+
    		'<thead style="background-color: #005DA9;color: #F9F6F6;">'+
			'<tr>'+
				'<th>'+data.list[i].JZMC+'</th>'+
			'</tr>'+
			'</thead>'+
			'<tbody>'+
    		'<td class="yd" style="" onclick="openRooms('+data.list[i].JZID+')" >'+
				
				'<table class="ydInfo">'+
					'<tr>'+
						'<td></td>'+
					'</tr>'+
					'<tr><td></td></tr>'+
					'<tr><td></td></tr><span id="floor">'+data.list[i].FLOOR+'</span>'+
					'<tr><td></td></tr>'+
					'<tr><td></td></tr>'+
				'</table>'+
				'空闲房间数15'+
			'</td>'+
			'</tbody>'+
			'</table>'+
			'</td>'
    		}
        	$('#lcxx').html(html);
        });
		
	}
	function openMap(){
		var name = $("#jstitle").text();
		
		api.openWin({
	        name: 'baidumap',
	        url: './baidumap.html',
	        pageParam:{
	        	name:name
	        }
        });
	}	
	function openRooms(jzid){

		
		var jstitle = document.getElementById('jstitle');
		var floor = document.getElementById('floor');
		var floors = $api.text(floor);
		var title = $api.text(jstitle);
		
		api.openWin({
	        name: 'rooms',
	        url: './select_room.html',
	        pageParam:{
	        	title:title,
	        	jzid:jzid
	        }
        });
        
	}
	
	

</script>
</html>